<template>
  <div class="com-container">
    <div class="com-chart" ref="hot_ref"></div>
    <span class="iconfont icon-left" @click="toLeft" :style="comStyle">&#xe6ef;</span>
    <span class="iconfont icon-right" @click="toRight" :style="comStyle">&#xe6ed;</span>
    <div class="title" :style="comStyle">{{title}}</div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getThemeValue } from "@/utils/theme_utils.js";

export default {
  data() {
    return {
      allData: null, //存储请求过来的数据
      echartInstance: null, //服务器获取过来的数据
      fontSize: 0,
      currentIndex: 0,
      title: null
    };
  },
  created() {
    this.$socket.registerCallBack("hotData", this.getData);
  },
  mounted() {
    this.initChart();
    // this.getData();
    // 发送数据
    this.$socket.send({
      action: "getData",
      socketType: "hotData",
      chartName: "hotproduct",
      value: ""
    });
    window.addEventListener("resize", this.screenAdapter);
    // 在刚进入页面时，主动进行屏幕适配
    this.screenAdapter();
  },
  computed: {
    ...mapState(["theme"]),
    comStyle() {
      return {
        fontSize: this.fontSize + "px",
        color: getThemeValue(this.theme).titleColor
      };
    }
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
    clearInterval(this.timeId);
    this.$socket.unRegisterCallBack("hotData");
  },
  methods: {
    initChart() {
      this.echartInstance = this.$echarts.init(this.$refs.hot_ref, this.theme);

      const initOption = {
        title: {
          text: "▎热销商品销售金额占比统计",
          top: 20,
          left: 20
        },
        tooltip: {
          show: true,
          formatter: arg => {
            const thirdCategory = arg.data.children;
            let total = 0;
            thirdCategory.forEach(item => {
              total += item.value;
            });
            let retStr = "";
            thirdCategory.forEach(item => {
              retStr += `
              ${item.name}:${parseInt((item.value / total) * 100) + "%"}
              <br/>
              `;
            });
            return retStr;
          }
        },
        series: [
          {
            type: "pie",
            radius: "60%",
            center: ["50%", "60%"]
          }
        ]
      };
      this.echartInstance.setOption(initOption);
    },
    getData(ret) {
      // const { data: ret } = await this.$http.get("hotproduct");
      this.allData = ret;
      console.log(this.allData);

      this.updateChart();
    },
    updateChart() {
      const legendData = this.allData[this.currentIndex].children.map(item => {
        return item.name;
      });
      const seriesData = this.allData[this.currentIndex].children.map(item => {
        return {
          name: item.name,
          value: item.value,
          children: item.children
        };
      });
      this.title = this.allData[this.currentIndex].name;
      const dataOption = {
        legend: {
          data: legendData,

          top: "10%",
          textStyle: {
            fontSize: this.fontSize / 1.5
          }
        },
        series: [
          {
            data: seriesData
          }
        ]
      };
      this.echartInstance.setOption(dataOption);
    },
    screenAdapter() {
      this.fontSize = (this.$refs.hot_ref.offsetWidth / 100) * 3.6;
      // 分辨率相关配置相关
      const adapterOption = {
        title: {
          // 设置标题样式
          textStyle: {
            fontSize: this.fontSize
          }
        }
      };
      this.echartInstance.setOption(adapterOption);
      this.echartInstance.resize();
    },
    toLeft() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      } else {
        this.currentIndex = this.allData.length - 1;
      }
      this.updateChart();
    },
    toRight() {
      if (this.currentIndex < this.allData.length - 1) {
        this.currentIndex++;
      } else {
        this.currentIndex = 0;
      }
      this.updateChart();
    }
  },

  watch: {
    theme() {
      // 销毁当前图表
      this.echartInstance.dispose();
      // 重新创建图表
      this.initChart();
      // 完成屏幕适配
      this.screenAdapter();
      // 更新图表的展示
      this.updateChart();
    }
  }
};
</script>
<style scoped lang='less'>
.com-container {
  position: relative;
  .icon-left {
    position: absolute;
    top: 60%;
    left: 10%;
    transform: translate(-50%);
    cursor: pointer;
    color: white;
  }
  .icon-right {
    position: absolute;
    top: 60%;
    right: 10%;
    transform: translate(-50%);
    cursor: pointer;
    color: white;
  }
  .title {
    position: absolute;
    bottom: 5%;
    color: white;
    right: 10%;
    font-weight: 600;
  }
}
</style>